<template>
    <div class="status-wrapper container">
        <table class="status-uptime">
            <tbody>
            <tr>
                <th>名称</th>
                <th>Uptime</th>
                <th>状态</th>
            </tr>
            <tr>
                <td>网站</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>手机应用</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>个人中心</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>免费回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>美国回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>美东回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>欧洲回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>亚洲回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>台湾回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>日本回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>新加坡回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>马来西亚回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>印度回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>澳大利亚回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>俄罗斯回国节点</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>亚洲游戏专线</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>北美游戏专线</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            <tr>
                <td>欧洲游戏专线</td>
                <td>100.00%</td>
                <td><span class="status-ok">ok</span></td>
            </tr>
            </tbody>
        </table>
        <div class="status-notice"><h4>服务器历史事件</h4>
            <div class="status-item">
                <div class="top"><span class="time">2021-2-10 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span></span> <span>扩充全球影音节点</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2021-1-30 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span></span> <span>新增影音专线选线能力</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-11-20 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span></span> <span>扩充美国、欧洲、亚洲等游戏节点</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-11-10 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span></span> <span>新增游戏专线选线能力</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-10-10 00:00:00</span> <span class="status-warn tag">warn</span>
                </div>
                <div class="content"><span></span> <span>游戏专线被攻击，导致服务故障，已自动切换备用</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-10-1 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span></span> <span>增加游戏专线防御能力</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-9-20 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span></span> <span>优化游戏专线路由</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-8-15 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span></span> <span>新增游戏专线备用节点</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-7-30 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>欧洲游戏专线</span> <span>新增欧洲游戏专线</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-7-20 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>北美游戏专线</span> <span>新增北美游戏专线</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-7-15 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>亚洲游戏专线</span> <span>新增亚洲游戏专线</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-7-10 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>俄罗斯回国节点</span> <span>新增俄罗斯回国节点，加速俄罗斯用户访问</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-6-1 00:00:00</span> <span class="status-ok tag">ok</span></div>
                <div class="content"><span></span> <span>所有节点扩容x2</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-5-20 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>美国回国节点</span> <span>美国加拿大节点扩容x2</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-4-24 00:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>亚洲回国节点</span> <span>亚洲节点扩容x2</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2020-3-24 00:00:00</span> <span class="status-warn tag">warn</span>
                </div>
                <div class="content"><span>亚洲回国节点</span> <span>节点遭受非法攻击</span></div>
                <div class="bottom"><span>状态：</span> <span>已切换备用</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-3-16 17:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>马来西亚回国节点</span> <span>带宽和性能5x提升，提升速度和稳定性</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-3-7 17:00:00</span> <span class="status-ok tag">ok</span></div>
                <div class="content"><span></span> <span>所有节点全线优化服务器策略和参数，提升稳定性</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-3-6 12:00:00</span> <span class="status-ok tag">ok</span></div>
                <div class="content"><span>欧洲回国节点</span> <span>升级硬件提升5x性能，降低网络处理时间</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-3-5 12:00:00</span> <span class="status-warn tag">warn</span>
                </div>
                <div class="content"><span>美国回国节点</span> <span>遭受恶意攻击，已切换备用</span></div>
                <div class="bottom"><span>状态：</span> <span>已恢复</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-3-2 15:00:00</span> <span class="status-ok tag">ok</span></div>
                <div class="content"><span>欧洲回国节点</span> <span>升级服务器和优化带宽以及策略</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-2-27 21:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>美东回国节点</span> <span>带宽扩容并提升10倍性能的服务器</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-2-25 16:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>澳大利亚回国节点</span> <span>扩容和优化澳大利亚回国节点</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-2-10 17:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>日本回国节点</span> <span>优化日本回国链路</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-2-1 15:10:00</span> <span class="status-ok tag">ok</span></div>
                <div class="content"><span>免费回国节点</span> <span>扩容免费服务节点</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-1-6 17:20:00</span> <span class="status-ok tag">ok</span></div>
                <div class="content"><span>印度回国节点</span> <span>部署完成，优化印度回国线路连接体验</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-1-5 17:20:00</span> <span class="status-ok tag">ok</span></div>
                <div class="content"><span>澳大利亚回国节点</span> <span>部署完成，优化澳大利亚、新西兰回国线路连接体验</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-12-29 02:20:00</span> <span class="status-warn tag">warn</span>
                </div>
                <div class="content"><span>美国回国节点</span> <span>遭受恶意攻击，已切换备用</span></div>
                <div class="bottom"><span>状态：</span> <span>已恢复</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-12-25 18:20:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>美国回国节点</span> <span>升级设备和线路，性能x4</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-12-22 17:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>马来西亚回国节点</span> <span>部署完成，优化马来西亚回国线路链接体验</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-12-4 16:20:00</span> <span class="status-warn tag">warn</span>
                </div>
                <div class="content"><span>亚洲回国节点</span> <span>受运营商设备故障影响，访问会出现缓慢</span></div>
                <div class="bottom"><span>状态：</span> <span>设备已换新</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-11-27 19:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>新加坡回国节点</span> <span>部署完成，优化东南亚回国线路连接体验</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-11-26 19:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>日本回国节点</span> <span>部署完成，优化日本、韩国回国线路连接体验</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-11-24 19:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>欧洲回国节点</span> <span>扩容带宽</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-11-19 19:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>美国回国节点</span> <span>扩容带宽并优化本地线路</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
            <div class="status-item">
                <div class="top"><span class="time">2019-11-12 19:00:00</span> <span class="status-ok tag">ok</span>
                </div>
                <div class="content"><span>亚洲回国节点</span> <span>扩容带宽</span></div>
                <div class="bottom"><span>状态：</span> <span>已完成</span></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Status"
}
</script>

<style scoped lang="scss">
.status-wrapper {
    margin-top: 68px;
    display: flex;
    .status-uptime {
        margin-top: 64px;
        width: 420px;
        border: 1px solid #ececec;
        flex-shrink: 0;
        border-collapse: collapse;
        tr {
            border-bottom: 1px solid #ececec;
            th {
                height: 48px;
                text-align: center;
                background: #FBFBFF;
                font-size: 14px;
                color: #333;
            }
            th:first-child {
                width: 40%;
            }
            th:nth-child(2) {
                width: 25%;
            }
            th:last-child {
                width: 35%;
            }
            td {
                height: 40px;
                text-align: center;
                font-size: 14px;
                color: #444;
                .status-ok {
                    color: #07BB07;
                    font-weight: 700;
                    font-size: 15px;
                }
            }
            td:nth-child(2) {
                font-weight: 500;
            }
        }
    }

    .status-notice {
        margin-left: 60px;
        padding: 64px 0 64px 60px;
        min-height: 600px;
        border-left: 3px solid #f3f3f3;
        width: 100%;
        h4 {
            font-size: 24px;
            font-weight: 400;
            margin-bottom: 40px;
        }
        .status-item {
            background: #fff;
            padding: 28px;
            border: 1px solid #ececec;
            border-radius: 4px;
            position: relative;
            margin-bottom: 34px;
            .top {
                display: flex;
                align-items: center;
                .tile {
                    font-size: 14px;
                    color: #7b7b7b;
                }
                .tag {
                    font-size: 13px;
                    padding: 1px 6px 2px;
                    background: #07BB07;
                    border-radius: 100px;
                    color: #fff;
                    font-weight: 700;
                    margin-left: 14px;
                }
            }
            .content {
                margin: 14px 0;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                span {
                    font-size: 16px;
                    line-height: 1.5;
                    font-weight: 500;
                    color: #333;
                }
            }
            .bottom {
                span {
                    font-size: 13px;
                    color: #7b7b7b;
                }
                span:last-child {
                    color: #333;
                    font-weight: 500;
                }
            }
        }
        .status-item:before {
            display: block;
            width: 7px;
            height: 7px;
            background: #fff;
            border-radius: 50%;
            border: 7px solid #4D55E8;
            position: absolute;
            left: -71px;
            top: 28px;
            content: '';
        }
    }
}
</style>
